{% extends 'article/base.html' %}
{% load static %}
{% block title %}
    article column
{% endblock %}

{% block link %}
    <link rel="stylesheet" href="{% static 'editor/css/style.css' %}">
    <link rel="stylesheet" href="{% static 'editor/css/editormd.css' %}">
{% endblock %}

{% block content %}
    <div class="container">
        <div style="margin-left: 10px">
            <form class="form-horizontal" action="." method="post">{% csrf_token %}
                <div class="row" style="margin-top: 10px;">
                    <div class="col-md-2 text-right"><span>标题</span></div>
                    <div class="col-md-10 text-left">{{ this_article_form.title }}</div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-md-2 text-right"><span>栏目:</span></div>
                    <div class="col-md-10 text-left">
                        <select id="which_column">
                            {% for column in article_columns %}
                                {% if column == this_article_column.column %}
                                    <option value="{{ column.id }}" selected="selected">{{ column.column }}</option>
                                {% else %}
                                    <option value="{{ column.id }}">{{ column.column }}</option>
                                {% endif %}
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="row" style="margin-top: 10px;">
                    <div class="col-md-2 text-right"><span>内容：</span></div>
                    <div id="editormd" class="col-md-10 text-left">
                        <!--{{ article_post_form.body }}-->
                        <textarea style="display:none;" id="id_body">
                            {{ article.body }}
                        </textarea>
                    </div>
                </div>
                <div class="row">
                    <input type="button" class="btn btn-primary btn-lg" value="发布" onclick="redit_article()">
                </div>
            </form>
        </div>
    </div>
{% endblock %}

{% block javascript %}
    <script src="{% static 'editor/lib/marked.min.js' %}"></script>
    <script src="{% static 'editor/lib/prettify.min.js' %}"></script>
    <script src="{% static 'editor/lib/raphael.min.js' %}"></script>
    <script src="{% static 'editor/lib/underscore.min.js' %}"></script>
    <script src="{% static 'editor/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'editor/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'editor/lib/jquery.flowchart.min.js' %}"></script>
    <script src="{% static 'editor/editormd.min.js' %}"></script>
    <script type="text/javascript">
        $(function () {
            let editor = editormd("editormd", {
                width: "100%",
                height: 640,
                path: "{% static 'editor/lib/' %}"
            })
        });

        function redit_article() {
            let title = $("#id_title").val();
            let column_id = $("#which_column").val();
            let body = $("#id_body").val();
            $.ajax({
                url: "{% url 'article:redit_article' article.id %}",
                type: "POST",
                data: {"title": title, "body": body, "column_id": column_id},
                success: function (e) {
                    if (e == "1") {
                        layer.msg("successful");
                        location.href = "{% url 'article:article_list' %}";
                    } else {
                        layer.msg("sorry")
                    }
                }
            })
        }
    </script>
{% endblock %}